<template>
  <van-row>
    <van-nav-bar
      title="我的"
      right-text="修改密码"
      @click-right="showUpdate"
    />
    <van-cell-group>
      <van-cell title="用户名" :value="userInfo.username" />
      <van-cell title="手机号" :value="userInfo.phoneNum" />
      <van-cell title="邮箱" :value="userInfo.email" />
      <van-cell title="部门" :value="userInfo.deptName" />
      <van-cell title="角色" :value="userInfo.roleNames" />
    </van-cell-group>
    <div class="bottom_button">
      <van-button type="danger" plain block round @click="logout">退出登录</van-button>
    </div>
    <van-popup v-model="show" closeable round position="bottom" :get-container="getContainer">
      <van-divider>修改密码</van-divider>
      <van-form @submit="doSubmit">
        <van-field
          v-model="submitForm.password"
          type="password"
          name="password"
          label="旧密码"
          placeholder="请输入旧密码"
          :rules="[{ required: true, message: '请输入旧密码' }]"
        />
        <van-field
          v-model="submitForm.newPassword"
          type="password"
          name="newPassword"
          label="新密码"
          placeholder="请输入新密码"
          :rules="[{ required: true, message: '请输入新密码' },
                   {validator: checkPassword, message: '密码不能少于6位'}]"
        />
        <van-field
          v-model="submitForm.confirmNewPassword"
          type="password"
          name="newPassword"
          label="确认新密码"
          placeholder="请输入确认新密码"
          :rules="[{ required: true, message: '请输入确认新密码' },
                   {validator: checkConfirmPassword, message: '两次输入的密码不一致'}]"
        />
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">提交</van-button>
        </div>
      </van-form>
    </van-popup>
  </van-row>
</template>

<script>
import { selectUserById, updatePassword } from '@/api/user'
import { logout } from '@/api/auth'
import { Dialog } from 'vant'
import store from '@/store'

export default {
  name: 'User',
  data() {
    return {
      show: false,
      userInfo: {
        username: '',
        phoneNum: '',
        email: '',
        deptName: '',
        roleNames: ''
      },
      submitForm: {
        password: '',
        newPassword: '',
        confirmNewPassword: ''
      }
    }
  },
  mounted() {
    this.getUserInfo()
  },
  methods: {
    getUserInfo() {
      var userId = this.$store.getters.id
      selectUserById(userId).then(resp => {
        this.userInfo = resp.data
      })
    },
    logout() {
      Dialog.confirm({
        title: '退出登录确认',
        message: '是否退出登录'
      }).then(() => {
        logout().then(() => {
          this.$store.dispatch('user/logout').then(() => {
            this.$router.replace('/login')
          })
        })
      }).catch(() => {
        // on cancel
      })
    },
    showUpdate() {
      this.show = true
      this.submitForm = {}
    },
    checkPassword(value) {
      return value.length >= 6
    },
    checkConfirmPassword(value) {
      return this.submitForm.newPassword === value
    },
    doSubmit() {
      updatePassword(this.submitForm).then(resp => {
        if (resp.success) {
          this.show = false
          Dialog.alert({
            message: '密码已修改，请重新登录'
          }).then(() => {
            store.dispatch('user/logout')
          })
        }
      })
    },
    getContainer() {
      return document.body
    }
  }
}
</script>

<style scoped></style>
